import React, { Component } from 'react';
import './index.scss';
import cls from 'classnames';
import { observer, inject } from "mobx-react";
import echarts from 'echarts';
import segmentJson from '../../assets/mapData/segment.json';

// const coords = [
//     { name: '西藏', coords: [91.132212, 29.660361] },
//     { name: '四川', coords: [103.065735, 30.659462] },
//     { name: '甘肃', coords: [104.823557, 35.058039] },
//     { name: '青海', coords: [100.578916, 36.623178] },
//     { name: '云南', coords: [102.712251, 24.040609] }
// ]

interface ILists {
    id: string;
    value: string;
};

interface IFlight{
    name: string;
    passport: string;
    idCard: string;
    flightNumber: string;
    departureTime: string;
    landingTime: string;
    departureAirportName: string;
    landingAirportName: string;
    [proper: string]: any;
}

interface IHomeProps{
    current: string;
    listDate: string;
    listType: string;
    listTypes: Array<ILists>;
    listDates: Array<ILists>;
    changeListType: (type: string) => void;
    changeListDate: (type: string) => void;
    getEmphasis: () => void;
    getFlight: () => void;
    updateTime: () => void;
    listData: any;
    flightData: Array<IFlight>;
}

interface IData{
    name: string;
    value: number;
    id: string;
}

@inject('homeStore') @observer
class App extends Component<{ homeStore: IHomeProps }, {}>{
    public echartsElement: any;
    public mapName: string = 'segment';
    public timer: any;
    public scrollTimer: any;

    componentDidMount() {
        this.props.homeStore.getFlight();
        this.renderMap();
        this.timer = setInterval(() => {
            this.props.homeStore.updateTime();
        }, 1000);

    }
    componentWillUnmount() {
        clearInterval(this.timer);
    }
    renderMap() {
        const myChart = echarts.init(this.echartsElement);
        echarts.registerMap(this.mapName, segmentJson);

        const option = {
            tooltip: {
                show: false
            },
            geo: {
                map: this.mapName,
                label: {
                    normal: {
                        show: true,
                        color: '#FFF',
                        fontSize: 22,
                        fontFamily: 'SourceHanSansCN-Bold',
                    },
                    emphasis: {
                        show: true,
                        color: '#FFF',
                        fontSize: 22,
                        fontFamily: 'SourceHanSansCN-Bold',
                    }
                },
                roam: true,
                zoom: 1.1,
                center: [91.9199, 33.1904],
                itemStyle: {
                    normal: {
                        areaColor: '#224880',
                        borderColor: '#12214b',
                        borderWidth: 2
                    },
                    emphasis: {
                        areaColor: '#406cff'
                    }
                }
            },
            series: [{
                name: '',
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'none'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 3,
                    trailLength: 0,
                    symbol: 'image://', //路径样式
                    symbolSize: 30
                },
                lineStyle: {
                    normal: {
                        color: '#FFDC4E',
                        type: 'solid',
                        width: 4,
                        opacity: 1,
                        curveness: 0.2
                    }
                },
                data: [{
                    coords: [
                        [103.065735, 30.659462], //四川坐标
                        [91.132212, 29.660361], //西藏
                    ]
                }, {
                    coords: [
                        [103.065735, 30.659462], //四川坐标
                        [104.823557, 35.058039] //甘肃
                    ]
                }, {
                    coords: [
                        [103.065735, 30.659462], //四川坐标
                        [100.578916, 36.623178] //青海

                    ]
                }, {
                    coords: [
                        [103.065735, 30.659462], //四川坐标
                        [102.712251, 24.040609] //云南
                    ]
                }]
            }, {
                type: 'scatter',
                zlevel: 3,
                coordinateSystem: 'geo',
                symbol: 'circle',
                symbolSize: 26,
                itemStyle: {
                    color: '#4EA7FF',
                    borderColor: '#FFF',
                    borderWidth: 4,
                    opacity: 1
                },
                data: [{
                    name: '西藏',
                    value: [91.132212, 29.660361]
                }, {
                    name: '四川',
                    value: [103.065735, 30.659462]
                }, {
                    name: '甘肃',
                    value: [104.823557, 35.058039]
                }, {
                    name: '青海',
                    value: [100.578916, 36.623178]
                }, {
                    name: '云南',
                    value: [102.712251, 24.040609]
                }]
            }]
        }

        myChart.setOption(option);
    }
    render() {
        const { listDate, listType, listDates, listTypes, changeListType, changeListDate, listData, flightData, current } = this.props.homeStore;
        return (
            <div className="home">
                <div className="top">
                    <div className="logo-wrap">
                        <div className="logo">
                            <span className="logo-text">海关缉私涉藏专项</span>
                            <span className="logo-img" />
                            <span className="logo-text">动态管控平台</span>
                        </div>
                    </div>
                    <time className="current">{current}</time>
                </div>
                <main className="content">
                    <aside className="left">
                        <div ref={e => this.echartsElement = e} style={{width: '100%', height: 800}}/>
                    </aside>
                    <aside className="right">
                        <div className="emphasis-lists">
                            <div className="banner">
                                <div className="tip">涉藏重点库</div>
                            </div>
                            <div className={cls('emphasis-inner', listType === 'company' ? 'company-inner' : 'common-inner')}>
                                <div className="item item-control">
                                    <div className="list">
                                        <div className="type-wrap">
                                            {listTypes.map(d => (
                                                <span
                                                    key={d.id}
                                                    className={cls('btn', d.id === listType ? 'active' : '')}
                                                    onClick={() => changeListType(d.id)}
                                                >{d.value}</span>
                                            ))}
                                        </div>
                                        <div className="type-wrap">
                                            {listDates.map(d => (
                                                <span
                                                    key={d.id}
                                                    className={cls('btn', d.id === listDate ? 'active' : '')}
                                                    onClick={() => changeListDate(d.id)}
                                                >{d.value}</span>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                                {
                                    listType === 'people' &&
                                    Array.isArray(listData) && listData.map((d: IData) => (
                                        <div className="item" key={d.id}>
                                            <div className="list">
                                                <span className={cls('icon', `people-${d.id}`)}></span>
                                                <span className="text">{d.name}</span>
                                                <span className="value">{d.value ? d.value.toLocaleString() : '/'}</span>
                                            </div>
                                        </div>
                                    ))
                                }
                                {
                                    listType === 'commodity' &&
                                    Array.isArray(listData) && listData.map((d: IData) => (
                                        <div className="item" key={d.id}>
                                            <div className="list">
                                                <span className={cls('icon', `commodity-${d.id}`)}></span>
                                                <span className="text">{d.name}</span>
                                                <span className="value">{d.value ? d.value.toLocaleString() : '/'}</span>
                                            </div>
                                        </div>
                                    ))
                                }
                                {
                                    listType === 'company' &&
                                    <div className="company-wrap">
                                        <div className="left-side">
                                            <div className="item">此处为占位</div>
                                            {
                                                listData.hasOwnProperty('region') && listData.region.map((d: IData) => (
                                                    <div className="item" key={d.id}>
                                                        <div className="list">
                                                            <span className={cls('icon', `${d.id}`)}></span>
                                                            <span className="text">{d.name}</span>
                                                            <span className="value">{d.value ? d.value.toLocaleString() : '/'}</span>
                                                        </div>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                        <div className="right-side">
                                            <div className="inner">
                                                {
                                                    listData.hasOwnProperty('country')&& listData.country.map((d: IData, index: number) => (
                                                        <div className="item" key={d.id}>
                                                            <span className="order">NO.{index + 1}</span>
                                                            <span className="text">货物输出国</span>
                                                            <span className="name">{d.name}</span>
                                                            <span className={cls('icon', `country-${d.id}`)}></span>
                                                        </div>
                                                    ))
                                                }
                                            </div>

                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                        <div className="flight-list">
                            <div className="banner">
                                <div className="tip">重点人员航班信息</div>
                            </div>
                            <div className="table-wrap">
                                <div className="wrap">
                                    <div className="t-head">
                                        <div className="item">
                                            <span>姓名</span>
                                            <span>护照号</span>
                                            <span>身份证号码</span>
                                            <span>航班号</span>
                                            <span>出发时间</span>
                                            <span>登机机场</span>
                                            <span>到达机场</span>
                                        </div>
                                    </div>
                                    <div className="t-body">
                                        <div className='inner' id="scrollBox">
                                            {
                                                flightData && flightData.map((d, index) => (
                                                    <div key={`flight-${index}`} className="item">
                                                        <span>{d.name}</span>
                                                        <span>{d.passport}</span>
                                                        <span>{d.idCard}</span>
                                                        <span>{d.flightNumber}</span>
                                                        <span>{d.departureTime}</span>
                                                        <span>{d.departureAirportName}</span>
                                                        <span>{d.landingAirportName}</span>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </aside>
                </main>
            </div>
        )
    }
}

export default App;
